<template>
  <page-header-wrapper>
    <a-card>
      <a-form-model :model="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }" style="margin-top: 20px">
        <a-form-model-item label="是否开启表单">
          <a-radio-group name="radioGroup" v-model="form.is_form">
            <a-radio :value="1"> 是 </a-radio>
            <a-radio :value="0"> 否 </a-radio>
          </a-radio-group>
          <div class="tips">
            <span>注:此表单只适用于结算页面</span>
            <span>注:开启自定义表单后，结算页面的买家留言将取消</span>
          </div>
        </a-form-model-item>
        <a-form-model-item label="自定义表单名称">
          <a-input v-model="form.form_name"></a-input>
        </a-form-model-item>
        <a-form-model-item label="表单设置">
          <div class="add">
            <a-select v-model="addType" style="width: 400px">
              <a-select-option value="text"> 单行文本 </a-select-option>
              <a-select-option value="textarea"> 多行文本 </a-select-option>
              <a-select-option value="time"> 时间选择器 </a-select-option>
              <a-select-option value="date"> 日期选择器 </a-select-option>
              <a-select-option value="radio"> 单选 </a-select-option>
              <a-select-option value="checkbox"> 多选 </a-select-option>
              <a-select-option value="uploadImg"> 图片上传 </a-select-option>
            </a-select>
            <a-button type="primary" style="margin-left: 20px" @click="addList">添加一个字段</a-button>
          </div>
          <div class="warning">注：名称最好不要超过4个中文字</div>
          <div class="table">
            <a-row style="padding: 0 5px" class="title">
              <a-col :span="4" style="text-align: left"> 类型 </a-col>
              <a-col :span="4"> 名称 </a-col>
              <a-col :span="2"> 必填 </a-col>
              <a-col :span="4"> 提示语 </a-col>
              <a-col :span="6"> 默认值 </a-col>
              <a-col :span="4"> 操作 </a-col>
            </a-row>
            <div class="list" @dragover.prevent>
              <a-row
                class="item"
                v-for="(item, index) in form.form_list"
                :key="index"
                :draggable="true"
                v-dragging="{
                  item: item,
                  list: form.form_list,
                  group: 'row',
                }"
              >
                <a-col :span="4" style="text-align: left">
                  {{
                    item.type == 'text'
                      ? '单行文本'
                      : item.type == 'textarea'
                      ? '多行文本'
                      : item.type == 'time'
                      ? '时间选择器'
                      : item.type == 'date'
                      ? '日期选择器'
                      : item.type == 'radio'
                      ? '单选'
                      : item.type == 'checkbox'
                      ? '多选'
                      : item.type == 'uploadImg'
                      ? '图片上传'
                      : ''
                  }}
                </a-col>
                <a-col :span="4">
                  <a-input style="width: 100%" v-model="item.name"></a-input>
                </a-col>
                <a-col :span="2">
                  <a-checkbox
                    :checked="item.required == 1 ? true : item.required == 0 ? false : ''"
                    @change="(e) => changeChecked(e, index)"
                  ></a-checkbox>
                </a-col>
                <a-col :span="4">
                  <a-input
                    style="width: 100%"
                    v-model="item.tip"
                    :placeholder="item.type == 'uploadImg' ? '请选择图片' : ''"
                    v-if="item.type == 'text' || item.type == 'textarea' || item.type == 'uploadImg'"
                  ></a-input>
                </a-col>
                <a-col :span="6">
                  <a-input
                    v-if="
                      item.type == 'text' || item.type == 'textarea' || item.type == 'radio' || item.type == 'checkbox'
                    "
                    v-model="item.default"
                  ></a-input>
                  <a-time-picker
                    v-model="item.default"
                    v-if="item.type == 'time'"
                    style="max-width: 100%"
                    valueFormat="HH:mm:ss"
                  />
                  <a-date-picker v-model="item.default" v-if="item.type == 'date'" valueFormat="YYYY-MM-DD" />
                  <p v-if="item.type == 'radio' || item.type == 'checkbox'" class="tip" style="color: #888">
                    多个请用英文 , 分开
                  </p>
                  <p v-if="item.type == 'radio' || item.type == 'checkbox'" class="tip" style="color: #d9534f">
                    注:第一个值默认选中
                  </p>
                </a-col>
                <a-col :span="4">
                  <a-button type="danger" size="small" @click="deleteItem(index)">删除</a-button>
                  <a-icon type="unordered-list" style="cursor: move; margin-left: 5px" />
                </a-col>
              </a-row>
            </div>
          </div>
          <a-row style="margin-top:20px;">
            <a-button type="primary" @click="save">保存</a-button>
          </a-row>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { saveForm, formList } from '@/api/setting/form'

export default {
  name: 'Form',
  components: {},
  data() {
    return {
      form: {
        is_form: '',
        form_name: '',
        form_list: [],
      },
      addType: 'text',
    }
  },
  mounted() {
    this.getFormData()
  },
  methods: {
    // 获取表单数据
    getFormData() {
      formList().then((res) => {
        console.log(res)
        if (res.code == 0) {
          this.form = res.data
        }
      })
    },
    changeChecked(e, index) {
      let checked = e.target.checked ? 1 : 0
      console.log(this.form.form_list)
      this.form.form_list[index].required = checked
    },
    addList() {
      this.form.form_list.push({
        type: this.addType,
        name: '',
        tip: '',
        required: '0',
        sort: '0',
        is_delete: '0',
      })
    },
    deleteItem(index) {
      console.log(index);
      this.form.form_list.splice(index,1)
    },
    save() {
      saveForm(this.form).then(res => {
        console.log(res);
        if(res.code == 0) {
          this.$message.success(res.msg)
        }
      })
    }
  },
}
</script>
<style scoped lang="less">
.tips {
  display: flex;
  flex-direction: column;
  color: #d9534f;
  font-size: 14px;
  span {
    line-height: normal;
  }
}
.add {
  display: flex;
  align-items: center;
}
.warning {
  font-size: 14px;
  color: #d9534f;
  margin-top: 20px;
}
.table {
  width: 100%;
  padding: 10px;
  background-color: rgb(246, 248, 249);
  .title {
    .ant-col {
      text-align: center;
      padding: 0 10px;
    }
  }
}
.list {
  margin-top: 10px;
  .item {
    background-color: #fff;
    padding: 5px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    .ant-col {
      text-align: center;
      padding: 0 10px;
    }
  }
}
.tip {
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: normal;
  text-align: left;
}
</style>
